<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        * {
            margin: 0%;
            padding: 0%;
            box-sizing: border-box;
        }

        a {
            text-decoration: none;
            color: gray;
        }

        .caidan {
            margin: 100px auto;
            width: 800px;
            height: 100px;
            border: 1px solid black;
            border-radius: 15px;
            background-color: blanchedalmond;
        }

        .caidan ul {
            list-style: none;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }

        .caidan ul li {
            width: 10%;
            height: 50%;
            font-size: 16px;
            color: gray;
            line-height: 50%;
            text-align: center;
        }

        .caidan ul li:hover {
            border-bottom: 1px solid black;
        }

        .xiala {
            position: relative;
        }

        .drop {
            width: 100px;
            height: 200px;
            background-color: azure;
            position: absolute;
            top: 100%;
            left: 0;
            display: none;
        }

        .drop ul {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
        }

        .drop ul li {
            width: 100%;
            height: 33.3%;
        }

        .drop ul li a {
            width: 80%;
            height: 80%;
            text-align: center;
            line-height: 100%;
        }

        .xiala:hover .drop {
            display: flex;
        }
    </style>

</head>
<body>
    <div class="caidan">
        <ul>
            <li class="xiala">
                <a href="#">微信&nbsp;></a>
                <span class="drop">
                    <ul>
                        <li><a href="#">小程序</a></li>
                        <li><a href="#">小程序</a></li>
                        <li><a href="#">小程序</a></li>
                    </ul>
                </span>
            </li>
            <li>QQ</li>
            <li>腾讯会议</li>
            <li>腾讯课堂</li>
            <li>QQ音乐</li>
            <li>王者荣耀</li>
        </ul>
    </div>
</body>
</html>